<template>
    <el-drawer :close-on-click-modal="false" class="hm-drawer" size="50%" direction="rtl" v-model="show"
        :before-close="handleClose">
        <template #header>
            <div class="hm-box-title">资质审核</div>
        </template>
        <el-row class="hm-row3 mb96" :gutter="60">
            <el-col :span="12">
                <div class="des_left">
                    <p class="label">商品名称:</p>
                    <p class="value">{{ examineData.styleName }}</p>
                </div>
                <div class="des_left">
                    <p class="label">类目:</p>
                    <p class="value">{{ examineData.categoryName
                        }}</p>
                </div>
                <div class="des_left">
                    <p class="label">品牌:</p>
                    <p class="value">{{ handleFilterBrand(examineData.brand, brandList) }}</p>
                </div>
                <div class="des_left">
                    <p class="label">贸易方式:</p>
                    <p class="value">{{ handleFilters(examineData.tradeMode, hm_trade_type)
                        }}</p>
                </div>
                <div class="des_left">
                    <p class="label">产地:</p>
                    <p class="value">{{ examineData.origin }}</p>
                </div>
                <div class="des_left">
                    <p class="label">提报日期:</p>
                    <p class="value">{{ examineData.listingDate }}</p>
                </div>
                <div class="des_left">
                    <p class="label">招商员:</p>
                    <p class="value">{{ examineData.recruiter }}</p>
                </div>
            </el-col>
            <el-col :span="12">
                <el-descriptions :column="1">
                    <el-descriptions-item label="商品图片(正面)">
                        <image-preview :src="examineData.productFrontImage" :width="182" :height="182" />
                    </el-descriptions-item>
                    <el-descriptions-item label="商品图片（反面生产信息图）">
                        <image-preview :src="examineData.produckBackImage" :width="182" :height="182" />
                    </el-descriptions-item>
                </el-descriptions>
            </el-col>
        </el-row>
        <div class="hm-form-title">资质信息</div>
        <el-form ref="supplierAddProductsFormRef" :model="examineData" style="width: 100%" :inline="true"
            label-width="200px">
            <el-row class="hm-row3" :gutter="60">
                <el-col :span="12">
                    <el-form-item label="进口货物/原材料报关单" prop="customsDeclarationImage">
                        <image-preview :src="examineData.customsDeclarationImage" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="授权品类" prop="categoryImage">
                        <image-preview :src="examineData.categoryImage" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="进口产品备案材料" prop="customsInformationImage">
                        <image-preview :src="examineData.customsInformationImage" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="商品使用授权证明" prop="empowerImage">
                        <image-preview :src="examineData.empowerImage" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="进口产品原材料检验检疫证明" prop="customsInspectionImage">
                        <image-preview :src="examineData.customsInspectionImage" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联名卡货其他授权文件" prop="authorizationImage">
                        <image-preview :src="examineData.authorizationImage" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="营业执照" prop="licenseImage">
                        <image-preview :src="examineData.licenseImage" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="品牌商标注册证明" prop="ltrademarkImage">
                        <image-preview :src="examineData.ltrademarkImage" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="hm-form-title">审核结果</div>
        <el-form ref="supplierAddProductsFormRefInvite" :model="formInvite" style="width: 100%" :inline="true"
            label-width="135px" :rules="rulesInvite">
            <el-row class="hm-row3" :gutter="60">
                <el-col :span="24">
                    <el-form-item label="审核结果" prop="directions">
                        <el-radio-group v-model="formInvite.directions">
                            <el-radio label="1">审核通过</el-radio>
                            <el-radio label="0">审核不通过</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row class="hm-row3" :gutter="60">
                <el-col :span="24">
                    <el-form-item label="审核意见" prop="desc">
                        <el-input v-model="formInvite.desc" type="textarea" :rows="3" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row class="hm-row3" :gutter="60">
                <el-col :span="24">
                    <el-form-item label="上传图片" prop="productImages">
                        <image-upload v-model="formInvite.productImages" />
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>

        <template #footer>
            <div style="flex: auto">
                <el-button type="primary" @click="confirmClick">完成</el-button>
            </div>
        </template>
    </el-drawer>
</template>
<script setup name="Examine" lang="ts">
import { hmProductsRefuse, hmProductsPass } from '@/api/group/qualityControl'
import { listBrand } from '@/api/system/brand';
import { BrandVO } from '@/api/system/brand/types';
import { validateSpaceAndEmoji } from '@/utils/validate'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_user_sex } = toRefs<any>(proxy?.useDict('sys_user_sex'));
const { hm_trade_type } = toRefs<any>(proxy?.useDict('hm_trade_type'));
const { hm_category } = toRefs<any>(proxy?.useDict('hm_category'));

const brandList = ref<BrandVO[]>([]);
const props = defineProps({
    examineData: {
        type: Object,
        default: ''
    },
    examineVisible: {
        type: Boolean,
        default: false
    }
});

/**
 * 获取品牌信息
 */
const getListBrand = async () => {
    const res = await listBrand()
    brandList.value = res.rows;

}

/**
* 品牌检索value
* @param para 
* @param dict 
*/
const handleFilterBrand = (para: string | number | undefined, dict: Array<any>) => {
    let _label = '';
    dict.forEach((item: any) => {
        if (item.id == String(para)) {
            _label = item.brandName;
        }
    });
    return _label;
};

interface FormInvite {
    directions: string;
    productImages: string;
    desc: string;
}
const formInvite = reactive<FormInvite>({
    directions: '1',
    productImages: '',
    desc: ''
});
const supplierAddProductsFormRefInvite = ref<ElFormInstance>();
const rulesInvite = reactive({
    directions: [
        {
            required: true,
            message: '请选择审核结果',
            trigger: 'change'
        }
    ],
    desc: [
        {
            required: true,
            message: '请输入审核意见',
            trigger: 'blur'
        },
        { validator: validateSpaceAndEmoji, }
    ],
    productImages: [
        {
            required: true,
            message: '请上传图片',
            trigger: 'change'
        }
    ],
})

/** 手动清除商品图片的验证 */
watch(
    () => formInvite.productImages,
    async (val) => {
        if (val) {
            supplierAddProductsFormRefInvite.value?.clearValidate(['productImages']);
        }
    }
);

const show = computed(() => props.examineVisible);
const emits = defineEmits(['doClose'])
const handleClose = () => {
    emits('doClose')
}




const confirmClick = () => {
    supplierAddProductsFormRefInvite.value?.validate(async (valid: boolean) => {
        console.log('formInvite', formInvite)
        // 审核通过
        if (formInvite.directions == '1') {
            const res = hmProductsPass({ id: props.examineData.id })
            supplierAddProductsFormRefInvite.value?.resetFields();
            proxy?.$modal.msgSuccess('审核成功');
            handleClose()
        } else {
            const res = hmProductsRefuse({ id: props.examineData.id })
            supplierAddProductsFormRefInvite.value?.resetFields();
            proxy?.$modal.msgSuccess('审核成功');
            handleClose()
        }
    })
}
onMounted(() => {
    getListBrand();
})

</script>
<style lang="scss" scoped>
.hm-form-title {
    font-size: 16px;
    font-weight: bold;
    color: #1a1b1c;
    margin-bottom: 10px;
}

.hm-drawer .el-drawer__header {
    margin-bottom: 0px !important;
}

.mb96 {
    margin-bottom: 96px;
}

.des_left {
    display: flex;
    align-items: center;

    .label {
        width: 70px;
        text-align: right;
    }

    .value {
        margin-left: 8px;
    }

}

:deep(.el-descriptions__content) {
    display: block;
}

:deep(.el-textarea__inner) {
    width: 400px;
}
</style>